.workspace-page {
  .user-information {

    display: flex;
    align-items: stretch;

    .user-information-avatar {
      background-color: plv(secondary-2);
      border-radius: 99px;
      width: 2.5em;
      height: 2.5em;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2em;
      color: plv(secondary-6);
    }

    .user-information-description {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 0.5em 0;

      & > div:nth-child(1) {
        font-size: 1.25em;
        font-weight: 600;
        color: plv(text-1);
        margin-bottom: 0.5em;
      }

      & > div:nth-child(2) {
        color: plv(text-2);
        display: flex;
        align-items: flex-start;

        & > .#{componentName(icon)} {
          margin-right: 0.5em;
          height: 1.4em;
          display: flex;
          align-items: center;
        }
      }
    }

    .user-information-statistic {
      display: flex;
      align-items: stretch;

      & > div {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0.5em 0;

        & > div {
          text-align: right;
          padding-left: 1.5em;
          margin-left: 1.5em;

          &:first-child {
            color: plv(text-2);
          }

          &:last-child {
            color: plv(text-1);
          }
        }
      }
    }
  }

  .project-list {
    background-color: plv(bg-1);

    .project-item {
      background-color: plv(bg-2);
      display: inline-flex;
      flex-direction: column;
      border-radius: 0;

      img {
        height: 2em;
        width: 2em;
        display: flex;
        align-items: center;
        margin-right: 0.5em;
      }

      .project-item-title {
        color: plv(text-2);
        font-weight: 600;
        display: flex;
        align-items: center;
        margin-bottom: 0.5em;
      }

      .project-item-description {
        line-height: 1.5715;
        height: 3em;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    &.project-list-3 {
      .project-item {
        width: calc((100% - 2px) / 3);

        &:not(:nth-child(3n)) {
          margin-right: 1px;
        }

        &:not(:nth-last-child(1)), &:not(:nth-last-child(2)), &:not(:nth-last-child(3)) {
          margin-top: 1px;
        }

        &:nth-child(1), &:nth-child(2), &:nth-child(3) {
          margin-top: 0;
        }
      }
    }

    &.project-list-5 {
      .project-item {
        width: calc((100% - 4px) / 5);

        &:not(:nth-child(5n)) {
          margin-right: 1px;
        }

        &:not(:nth-last-child(1)), &:not(:nth-last-child(2)), &:not(:nth-last-child(3)), &:not(:nth-last-child(4)), &:not(:nth-last-child(5)) {
          margin-top: 1px;
        }

        &:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4), &:nth-child(5) {
          margin-top: 0;
        }
      }
    }
  }

  .quick-access-list {
    .project-item {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      @include comp(icon) {
        font-size: 1.5em;
      }
    }
  }

  .todo-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    .project-item {
      &:not(:last-child) {
        border-bottom: solid 1px plv(border-color);
      }

      & > div:first-child {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5em;

        & > div:first-child {
          color: plv(text-1);
        }

        & > div:last-child {
          display: flex;
          align-items: center;

          div {
            font-size: 0.8em;
            padding: 2px 4px;
            margin-left: 4px;
            border-radius: plv(box-size-mini-border-radius);

            @include statusMixin(item) {
              background-color: $color-1;
              color: $color-6;
              border: solid 1px $color-6;
            }
          }
        }
      }

      & > div:last-child {
        font-size: 0.9em;
        color: plv(text-3);
      }
    }
  }

  .my-team-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    .project-item {
      display: flex;
      flex-direction: row;

      & > img {
        height: 3em;
        width: 3em;
        border-radius: 99px;
        object-fit: cover;
      }

      & > div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        & > div {
          &:first-child {
            color: plv(text-1);
          }

          &:last-child {
            color: plv(text-3);
            font-size: 0.8em;
            margin-top: 0.5em;
          }
        }
      }

      &:not(:last-child) {
        border-bottom: solid 1px plv(border-color);
      }
    }
  }

  .workspace-page-news-item {
    display: flex;
    align-items: stretch;
    border-bottom: solid 1px plv(border-color);

    .workspace-page-news-item-avatar {
      margin-right: 0.5em;

      img {
        height: 2.5em;
        width: 2.5em;
        border-radius: 99px;
        object-fit: cover;
      }
    }


    .workspace-page-news-item-message {
      display: flex;
      align-items: stretch;
      flex-direction: column;
      justify-content: center;
      color: plv(text-2);

      .workspace-page-news-item-link {
        color: plv(primary-6);
        cursor: pointer;
      }

      .workspace-page-news-item-message-datetime {
        font-size: 0.8em;
        margin-top: 0.5em;
        color: plv(text-3);
      }
    }
  }
}

.app-container {
  @include sizeMixin(app-container, ()) {
    .user-information-avatar {
      margin-right: $margin;
    }
  }
}
